// 地区模糊查询
import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {UploadOutlined } from '@ant-design/icons';
import { requestHeadersMd5  } from '@/utils/utils';

import { Modal, Row, Col, Input,Upload,Button,message, Radio, Select } from 'antd';
import styles from '@/utils/utils.less';

const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const { Option } = Select;

@Form.create()
class CircleModal extends React.Component {
  state = {
    affixList: [],
    affixIds:[],
    uploadUrl: '/csApi/fileServer/uploadFile',
    downloadUrl: '/csApi/fileServer/downloadFile',
    showOriginal: false,
    circulationRequire: false,
  };
  

 // 文件上传
 changeUpload = (info, listContFile) => {
  let { fileList } = info;
  const { file } = info;
  const { downloadUrl, affixIds} = this.state;
  // const { getFileInfo } = this.props;
  const newData = listContFile.map(item => ({ ...item }));
  if (file.status === 'done' && file.response.success) {
    const fileId = file.response.data.split('|')[0];
    const fileName = file.response.data.split('|')[1];
    fileList.map(files => {
      const temp = files;
      temp.url = `${downloadUrl}?fileId=${fileId}&fileName=${fileName}`;
      temp.linkProps = { download: `${fileName}` };
    });
    newData.push({
      uid: file.uid,
      affixId: fileId,
      affixName: fileName,
    });
    this.setState({ affixList: newData });
    // getFileInfo(newData);
    this.setState({ affixIds: newData });
    console.log(newData,'文件上传');
    message.success('文件上传成功！');
  } else {
    fileList = [];
    if ((file.status === 'done' && !file.response.success) || file.status === 'error') {
      message.error('上传失败！');
    }
    return fileList;
  }
};


// 移除文件
removeFile = (file, listContFile) => {
  const { affixIds} = this.state;
  // const { getFileInfo } = this.props;
  const newData = listContFile.filter(item => item.uid !== file.uid);
  // console.log(newData,'newData');
  this.setState({ affixList: newData });
  this.setState({ affixIds: newData });

  // getFileInfo(newData);
};

// 文件限制大小
beforeUpload = () => {};

  handleOk = () => {
    const {
      form: { validateFieldsAndScroll },
      onOk = () => {},
      matFileDictItem,
    } = this.props;

    validateFieldsAndScroll((err, values) => {
      if (!err) {
        const {
          affixIds,
        } = this.state;
        const newValues = values;
        delete newValues.affixIds;
        if (affixIds.length) {
          affixIds.map(f => {
            const ff = f;
            delete ff.uid;
          });
        }
        if (+values.handoverMasterFile === 1) {
          const arr = [];
          if (matFileDictItem.length) {
            matFileDictItem.forEach(item => {
              arr.push(item.itemCode);
            });
          }
          newValues.optMasterFiles = arr;
        }
        onOk({...newValues,affixIds});
        this.setState({
          showOriginal: false,
          circulationRequire: false,
        });
      }
    });
  };

  handleCancle = () => {
    const { onCancel = () => {} } = this.props;
    this.setState({
      showOriginal: false,
      circulationRequire: false,
    });
    onCancel();
  };

  refunds = e => {
    this.setState({
      showOriginal: e.target.value === '2',
      circulationRequire: e.target.value === '4',
    });
  };

  render() {
    const { selectedRows } = this.props;
    const {
      form: { getFieldDecorator },
      visible,
      matFileDictItem,
      coltFlag,
    } = this.props;
    const { showOriginal, circulationRequire } = this.state;
    const { uploadUrl, affixList } = this.state;

    const uploadProps = {
      beforeUpload: info => this.beforeUpload(info, affixList),
      action: uploadUrl,
      headers: requestHeadersMd5(),
      onChange: info => this.changeUpload(info, affixList),
      onRemove: file => this.removeFile(file, affixList),
    };
    let pdOptionList = [];
    if (+coltFlag === 1) {
      pdOptionList = [
        { itemCode: '1', itemName: '全部原件' },
        { itemCode: '2', itemName: '部分原件' },
        { itemCode: '3', itemName: '无原件' },
        { itemCode: '4', itemName: '其他' },
      ];
    }
    if (+coltFlag === 2) {
      pdOptionList = [{ itemCode: '4', itemName: '其他' }];
    }
    // 材料
    const productList = matFileDictItem || [];
    const formItemLayout = {
      labelCol: {
        xl: {
          span: 4,
        },
      },
      wrapperCol: {
        xl: {
          span: 20,
        },
      },
    };
    return (
      <Modal
        title="原件流转"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancle}
        destroyOnClose
      >
        <div>
          {selectedRows.length > 1?(<div style={{ marginBottom: 20 ,color:'#ff4d4f'}}>单个人员可上传附件内容</div>):null}
          <Row>
            <Col>
              {selectedRows.length > 1 ? (
                <Row style={{ marginBottom: 20 }}>
                  <Col span={10}>
                    <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>已选数据：</span>
                    <span className="emphasize-text">{selectedRows.length}</span>人
                  </Col>
                </Row>
              ) : (
                selectedRows.map(item => (
                  <Row key={item.certNo} style={{ marginBottom: 20 }}>
                    <Col span={10}>姓名：{item.empName}</Col>
                    <Col span={12}>证件号：{item.certNo}</Col>
                  </Row>
                ))
              )}
              <FormItem {...formItemLayout} label="交接原件">
                {getFieldDecorator('handoverMasterFile', {
                  rules: [
                    {
                      required: true,
                      message: '请选择交接原件',
                    },
                  ],
                  initialValue: String(coltFlag) === '2' ? '4' : '1',
                })(
                  <RadioGroup onChange={e => this.refunds(e)}>
                    {pdOptionList.map(item => (
                      <Radio value={item.itemCode} key={item.itemCode}>
                        {item.itemName}
                      </Radio>
                    ))}
                  </RadioGroup>
                )}
              </FormItem>

              {showOriginal && (
                <Form.Item {...formItemLayout} label="选择原件">
                  {getFieldDecorator('optMasterFiles', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Select placeholder="请选择" mode="multiple" style={{ width: '100%' }}>
                      {productList.map(one => (
                        <Option key={one.itemCode} value={one.itemCode}>
                          {one.itemName}
                        </Option>
                      ))}
                    </Select>
                  )}
                </Form.Item>
              )}
              <FormItem label="流转备注" className={styles.labelStyle}>
                {getFieldDecorator('content', {
                  rules: [{ required: circulationRequire, message: '请输入至少五个字', min: 5 }],
                })(
                  <TextArea
                    placeholder="请输入至少五个字"
                    autosize={{ minRows: 3, maxRows: 6 }}
                    maxLength="100"
                  />
                )}
              </FormItem>
              {selectedRows.length===1?(
                <Form.Item {...formItemLayout} label="附件">
                  {getFieldDecorator('affixIds', {
                     rules: [{ required: false, message: '请输入' }],
                   })(
                     <Upload {...uploadProps} beforeUpload={this.beforeUpload}>
                       {affixList.length < 5 ? (
                         <Button>
                           <UploadOutlined /> 上传附件
                         </Button>
                       ) : null}
                     </Upload>
                   )}
                </Form.Item>
              ):null}
             
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}
export default CircleModal;
